<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../css/common.css">
		<link rel="stylesheet" type="text/css" href="../css/icomoon/style.css">
		<script type="text/javascript" src="../js/rem.js"></script>
	</head>

	<body>
		<div id="content">
			<h3 class="header f-pr">
				<span>安全中心</span>
				<i class="icon-angle-left f-pa" @tap="back()"></i>
			</h3>
			<div class="m-security">
				<ul class="common-list">
					<li>
						<!-- 已开通 i, small移除.unset -->
						<i class="icon icon-8 unset"></i>
						<span>资金托管账户</span>
						<span class="f-fr">
							<small class="unset">未开户</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
				</ul>
				<ul class="common-list">
					<li @tap="routes({url: 'auth.html'})">
						<i v-if="is_full_name" class="icon icon-1"></i>
						<i v-else class="icon icon-1 unset"></i>
						<span>实名认证</span>
						<span class="f-fr">
							<small v-if="is_full_name">{{full_name}}</small>
							<small v-else class="unset">未设置</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
					<li @tap="routes({url: 'modifypassword.html'})">
						<i class="icon icon-2"></i>
						<span>登录密码</span>
						<span class="f-fr">
							<small>修改</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
					<template v-if="is_pay_password">
						<li @tap="routes({url: 'modifytranspassword.html'})">
							<i class="icon icon-3"></i>
							<span>交易密码</span>
							<span class="f-fr">
								<small>修改</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>
					<template v-else>
						<li @tap="routes({url: 'transpassword.html'})">
							<i class="icon icon-3 unset"></i>
							<span>交易密码</span>
							<span class="f-fr">
								<small class="unset">未设置</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>
				</ul>
				<ul class="common-list">
					<li>
						<i v-if="is_mobile" class="icon icon-4"></i>
						<i v-else class="icon icon-4 unset"></i>
						<span>绑定手机</span>
						<span class="f-fr">
							<small v-if="is_mobile">{{mobile}}</small>
							<small v-else class="unset">未绑定</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
					<!--<template v-if="is_email">
						<li>
							<i class="icon icon-5"></i>
							<span>安全邮箱</span>
							<span class="f-fr">
								<small>{{email}}</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>
					<template v-else>
						<li @tap="routes({url: 'email.html'})">
							<i class="icon icon-5 unset"></i>
							<span>安全邮箱</span>
							<span class="f-fr">
								<small class="unset">未绑定</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>-->
					<li id="risk">
						<i class="icon icon-6 unset"></i>
						<span>风险承受能力</span>
						<span class="f-fr">
							<small class="unset">未评估</small>
							<i class="icon-angle-right"></i>
						</span>
					</li>
				</ul>
				<ul class="common-list">
					<template v-if="is_bind_bankcard">
						<li @tap="routes({url: 'bankcard.html'})">
							<i class="icon icon-7"></i>
							<span>银行卡</span>
							<span class="f-fr">
								<!-- <img src="../images/bank.png"> -->
								<small>已绑定</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>
					<template v-else>
						<li @tap="routes({url: 'bindbankcard.html'})">
							<i class="icon icon-7 unset"></i>
							<span>银行卡</span>
							<span class="f-fr">
								<small class="unset">未绑定</small>
								<i class="icon-angle-right"></i>
							</span>
						</li>
					</template>
				</ul>
			</div>
		</div>
		
		<div class="overlay">
			<div class="modal modal-risk">
				<a class="rclose" id="close"></a>
				<h3>风险承受能力评估</h3>
				<p class="img"></p>
				<p class="tit">1分钟了解您的风险承受能力</p>
				<p class="tit">获得更好的投资服务，更科学的资产配置建议</p>
				<a class="btn">重新评估</a>
				<p class="tip">尊敬的用户，您的风险承受能力为</p>
				<p class="result">保守型</p>
			</div>
		</div>
		
		<script type="text/javascript" src="../js/md5.min.js"></script>
		<script type="text/javascript" src="../js/zepto.min.js"></script>
		<script type="text/javascript" src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js"></script>
		<script type="text/javascript" src="../js/common.js"></script>
		<script type="text/javascript">
			var vm;

			function init() {
				vm = new Vue({
					el: '#content',
					data: {
						email: '',
						full_name: '',
						mobile: '',
						is_email: false,
						is_full_name: false,
						is_mobile: false,
						is_pay_password: false,
						is_bind_bankcard: false
					},
					methods: {
						routes: function(data) {
							mui.openWindow({
								url: data.url,
								extras: {
									preid: plus.webview.currentWebview().id,
								},
								show: {
									aniShow: 'pop-in', //页面显示动画，默认为”slide-in-right“；
									event: "loaded"
								}
							});
						},

						back: function() {
							mui.back();
						}
					}		
				});
				load();
			}
			document.addEventListener("plusready", init, false);

			function load() {
				$.ajax({
					url: base + 'account/info',
					type: 'get',
					data: {
						'id': parseInt(plus.storage.getItem('user_id'))
					},
					dataType: 'json',
					headers: sign(md5),
					success: function(data) {
						console.log('个人信息获取：' + JSON.stringify(data));
						vm.email = data.email;
						vm.full_name = data.full_name;
						vm.mobile = data.mobile;
						vm.is_email = data.is_email;
						vm.is_mobile = data.is_mobile;
						vm.is_full_name = data.is_full_name;
						vm.is_pay_password = data.is_pay_password;
						vm.is_bind_bankcard = data.is_bind_bankcard;
					},
					error: function(data) {
						console.info(JSON.stringify(data));
					}
				});
			}
			
			riskResult();

			// 风险承受能力已评估时显示结果
			function riskResult(){
				var $pop = $(".overlay");

			    function modalHidden($ele) {
			        $ele.removeClass("modal-in");
			        $ele.one("transitionend", function() {
			            $ele.css("display", "none");
			            $pop.removeClass("active");
			        });
			    }

			    $("#risk").on("click", function() {
			        $pop.addClass("active");
			        var $modal = $(".modal");
			        $modal.css("display", "block");
			        $modal.addClass("modal-in");

			        $("#close").on("click", function(e) {
			            modalHidden($modal);
			            e.stopPropagation();
			        });

			        $(".overlay").on("click", function(e) {
			            if (e.target.classList.contains("overlay")) {
			                modalHidden($modal);
			            }
			        });
			    });
			}
		</script>
	</body>

</html>